.tile .t-header .th-title a.query-link {
  color: rgba(0, 0, 0, 0.5);
}

visualization-name:empty + span {
  color: rgba(0, 0, 0, 0.8);
}

visualization-name {
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);

  &:after {
    content: "−";
    margin-left: 5px;
  }

  &:empty:after {
    content: none;
  }
}

.th-title p.hidden-print {
  margin-bottom: 0;
}

.widget-wrapper {
  .body-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .body-row {
      flex: 0 1 auto;
    }

    .body-row-auto {
      flex: 1 1 auto;
    }
  }

  .spinner-container {
    position: relative;

    .spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .dropdown-header {
    padding: 0;

    .actions {
      position: static;
    }
  }

  .t-header.widget {
    .dropdown {
      margin-top: -15px;
      margin-right: -15px;

      .actions {
        position: static;
      }
    }
  }

  .scrollbox:empty {
    padding: 0 !important;
    font-size: 1px !important;
  }

  .widget-text {
    :first-child {
      margin-top: 0;
    }
    :last-child {
      margin-bottom: 0;
    }
  }
}


// react-grid-layout overrides
.react-grid-item {

  // placeholder color
  &.react-grid-placeholder {
    border-radius: 3px;
    background-color: #E0E6EB;
    opacity: 0.5;
  }

  // resize placeholder behind widget, the lib's default is above 🤷‍♂️
  &.resizing {
    z-index: 3;
  }

  // auto-height animation
  &.cssTransforms:not(.resizing) {
    transition-property: transform, height; // added ", height"
  }

  // resize handle size
  & > .react-resizable-handle::after {
    width: 11px;
    height: 11px;
    right: 5px;
    bottom: 5px;
  }
}